<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js.下载"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js.下载"></script>
</head>
<body>
	<!--头部-->
		<div class="top_container">
			<div class="top_left">
				<a href="/Homepage" ><img
					src="img/logo.png" width="134" height="100"></a>
			</div>
			<div class="top_middle">
				<h2>基能源与环境材料团队</h2>
				<h4>MOFs-based energy and environmental materials team</h4>
			</div>
			<div class="top_right">
				<p><a href="/Homepage">中文</a>| <a href="Homepage_en.html">English</a></p>
				<p>Tel:020-87113656</p>
				<a href="mailto:111111111@qq.com">E-mail:111111111@qq.com</a>
			</div>
			<div class="cl"></div>
		</div>
	<!--头部结束-->
	
	<!-- 导航栏 -->
		<div class="nav">
			<ul>
				<li class="selected"><a href="/Homepage">首页</a></li>
				<li><a href="/Research">研究方向</a></li>
				<li><a href="/Members">团队成员</a></li>
				<li><a href="/Publications">研究成果</a></li>
				<li><a href="/Facilities">仪器设备</a></li>
				<li><a href="/Cooperation">合作研究</a></li>
				<li><a href="/Academic">学术活动</a></li>
				<li><a href="/Recruitment">招聘启事</a></li>
				<div class="cl"></div>
			</ul>
		</div>
	<!-- 导航栏结束 -->
	
	<!-- 轮播图 -->
		<div class="carousel_container">
			<div class="carousel_in">
				<div id="slideBox" class="slideBox">
					<div class="hd">
						<ul>
							<li class="on"></li>
							<li class=""></li>
							<li class=""></li>
							<li class=""></li>
							<li class=""></li>
						</ul>
					</div>
					<div class="bd">
						<ul>
							<c:forEach items="${bannerList}" var="item">
								<li><a><img src="${item.banner}"></a></li>
							</c:forEach>
						</ul>
					</div>
					
					<a class="prev" href="javascript:void(0)"><img src = "/img/left.png"/></a>
					<a class="next" href="javascript:void(0)"><img src = "/img/right.png"/></a>
				</div>
			</div>
		</div>
		<script type="text/javascript">
		jQuery(".slideBox").slide({
			mainCell : ".bd ul",
			autoPlay : true,
			trigger : "click",
			interTime : 4500,
			delayTime : 700,
			animation : "slide3D",
			effect : "fold"
		});
	</script>
	<!-- 轮播图结束 -->
	
	<!-- 正文 -->
	<div class="home_content">
		<!-- 课题组简介 -->
		<div class = "home_left">
			<div class="home_up">
				<h4>课题组简介</h4>
			</div>
			<div class="home_left_down">
				<div>
					<img src="${introduction.image}">
				</div>
				<div>
					<p>${introduction.content}</p>
				</div>
				<div class="cl"></div>
			</div>
		</div>
		<!-- 课题组简介结束 -->
		
		<!-- 组内新闻 -->
		<div class="home_right">
			<div class="home_up">
				<h4>
					组内新闻
				</h4>
				<a href="/news">更多</a>
			</div>
			<div class="home_right_down">
				<div class="bd">
					<div class="tempWrap">
						<ul>
							<c:forEach items="${newsList}" var="item">
								<li>
									<div class="home_right_news">
										<a href = "/Homepage">${item.title}</a>
										<p>${item.postDate}</p>
									</div>
									<div class="cl"></div>
								</li>
							</c:forEach>
						</ul>
						<div class = "cl"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 组内新闻结束 -->
		<div class = "cl"></div>
	</div>
	<!-- 正文结束 -->
	
	<script>
		jQuery(".home_right_down").slide({
			mainCell : ".bd ul",
			autoPlay : true,
			effect : "topMarquee",
			vis : 4,
			interTime : 50,
			trigger : "click"
		});
	</script>
	
	<!-- 底部 -->
	<div class = "bottom_container">
		<p>地址：广州市天河区五山路381号华南理工大学15号楼421室</p>
		<p>电话：020-87113656</p>
		<p>MOF 基能源与环境材料团队</p>
	</div>
	<!-- 底部结束 -->
</body>
</html>